<template>
  <div>
    <div class="page_box">
      <window-title title="基本信息">
        <el-button
          @click="showPreview"
          size="mini"
          style="float:right;background:#8a70c6;color:#fff"
        >预览</el-button>
      </window-title>
      <el-form class="basicInfoActive" label-position="left" :model="basicInfo" label-width="80px">
        <el-form-item label="赛事名称">
          <el-input size="small" disabled v-model="basicInfo.activeName"></el-input>
        </el-form-item>
        <el-form-item label="赛事封面">
          <el-image style="width:320px;height:180px" :src="basicInfo.cover"></el-image>
        </el-form-item>
        <el-form-item label="报名时间">
          <el-date-picker
            disabled
            size="small"
            type="datetimerange"
            range-separator="至"
            :start-placeholder="basicInfo.singTimeStart"
            :end-placeholder="basicInfo.singTimeEnd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="赛事时间">
          <el-date-picker
            disabled
            size="small"
            type="datetimerange"
            range-separator="至"
            :start-placeholder="basicInfo.timeStart"
            :end-placeholder="basicInfo.timeEnd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="比赛地点">
          <el-input size="small" disabled v-model="basicInfo.adress"></el-input>
        </el-form-item>
        <el-form-item label="比赛类型">
          <el-input size="small" disabled v-model="basicInfo.type"></el-input>
        </el-form-item>
        <el-form-item label="报名范围">
          <el-input size="small" disabled v-model="basicInfo.range"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="page_box" style="margin-top:20px">
      <window-title title="组别信息"></window-title>
      <el-table border size="mini" :data="groupData" style="width: 100%;margin-top:20px">
        <!-- <el-table-column 
        :label="item.label"
        :prop="item.prop"
        v-for="(item, index) in groupHeader" :key="index"></el-table-column>-->
        <el-table-column label="组别名称" prop="groupName"></el-table-column>
        <el-table-column label="总人数" prop="allNum"></el-table-column>
        <el-table-column label="类型" prop="type">
          <template slot-scope="scope">
            <el-button disabled v-if="scope.row.type == 1" size="mini" type="warning">个人</el-button>
            <el-button disabled v-else size="mini" type="danger">组队</el-button>
          </template>
        </el-table-column>
        <el-table-column label="报名审核" prop="audit">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.audit" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="代报名" prop="sing">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.sing" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="收费" prop="isCharge">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isCharge" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="会员价" prop="vipPrice"></el-table-column>
        <el-table-column label="早鸟价" prop="birdPrice"></el-table-column>
      </el-table>
    </div>
    <!-- 服务信息 -->
    <div class="page_box" style="margin-top:20px">
      <window-title title="附加服务"></window-title>
      <el-table border size="mini" :data="serviceData" style="width: 100%;margin-top:20px">
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          v-for="(item, index) in serviceHeader"
          :key="index"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="showService(scope.$index)" icon="el-icon-view">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情信息 -->
    <div class="page_box" style="margin-top:20px">
      <window-title title="详情信息"></window-title>
      <div style="text-align:center">
        <div class="detail_content">我让合肥官方jaw几千万家人群殴还能发</div>
        <el-image :src="src" fit="fit"></el-image>
      </div>
    </div>
    <!-- 模态框显示预览 -->
    <el-dialog
      :visible.sync="see_view"
      width="420px"
      title="活动预览"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <see-view></see-view>
    </el-dialog>
    <!-- 服务预览 -->
    <el-dialog :title="serviceData[serviceD_index].name" :append-to-body="true" :visible.sync="dialogService" width="30%">
      <div class="serviceDialog">
        <div class="content" style="line-height:26px;margin-bottom:10px">这是内容区，内容都在这里哦</div>
        <img style="width:100%" src="../../../assets/img/brand04.png" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import seeView from "../set/view";
export default {
  components: { windowTitle, seeView },
  data() {
    return {
      dialogService: false,
      see_view: false,
      serviceD_index:0,
      src: require("../../../assets/img/brand02.png"),
      basicInfo: {
        activeName: "团报",
        cover: require("../../../assets/img/brand02.png"),
        singTimeStart: "2020-12-13",
        singTimeEnd: "2020-12-13",
        timeStart: "2020-02-03",
        timeEnd: "2020-03-02",
        adress: "安徽省合肥市",
        type: "马拉松",
        range: "全部"
      },
      // groupHeader: [
      //   { label: "组别名称", prop: "groupName" },
      //   { label: "总人数", prop: "allNum" },
      //   { label: "类型", prop: "type" },
      //   { label: "收费", prop: "isCharge" },
      //   { label: "价格", prop: "price" },
      //   { label: "会员价", prop: "vipPrice" },
      //   { label: "早鸟价", prop: "birdPrice" },
      //   { label: "报名审核", prop: "audit" },
      //   { label: "代报名", prop: "sing" }
      // ],
      groupData: [
        {
          groupName: "男子组",
          allNum: "20",
          type: "1",
          isCharge: true,
          price: "30.00",
          vipPrice: "20.00",
          birdPrice: "10.00",
          audit: true,
          sing: true
        }
      ],
      serviceHeader: [
        { label: "服务名称", prop: "name" },
        { label: "服务价格", prop: "price" },
        { label: "划线价格", prop: "linePrice" },
        { label: "服务数量", prop: "num" }
      ],
      serviceData: [
        {
          name: "宾馆服务",
          price: "20.00",
          linePrice: "30.00",
          num: "10"
        }
      ]
    };
  },
  methods: {
    showPreview() {
      console.log(1);
      this.see_view = true;
    },
    showService(index) {
      this.serviceD_index = index
      console.log(index);
      this.dialogService = true;
    }
  }
};
</script>

<style>
.basicInfoActive .el-form-item {
  margin-bottom: 10px;
}
</style>